<template>
    <div class="chart-container">
      <div class="chart-container_left">
        <DataOverview :basicData="basicData" />
        <ElectricFence />
        <DataStatistics />
      </div>
      <div class="chart-container_center">
        <RealTime :basicData="basicData" />
      </div>
      <div class="chart-container_right">
        <MonitoringScreen />
        <Personnel />
        <Vehicle />
      </div>
    </div>
</template>
<script>
import DataOverview from './DataOverview'
import ElectricFence from './ElectricFence'
import DataStatistics from './DataStatistics'
import RealTime from './RealTime'
import MonitoringScreen from './MonitoringScreen'
import Personnel from './Personnel'
import Vehicle from './Vehicle'
import { getBasicQuery } from '@/api/index.js'
export default {
  name: 'Container',
  components: {
    DataOverview,
    ElectricFence,
    DataStatistics,
    RealTime,
    MonitoringScreen,
    Personnel,
    Vehicle,
  },
  data() {
    return {
      basicData: {},
    }
  },
  methods: {
    _getBasicQuery() {
      getBasicQuery({}).then((res) => {
        if (res.data) {
          this.basicData = res.data
        }
      })
    },
  },
  created() {
    this._getBasicQuery()
  },
}
</script>

<style lang="less" scoped>
.chart-container {
  display: flex;
  justify-content: space-between;
  margin: 37px 33px 31px 32px;
}
</style>